---
import Navigation from '../components/Navigation.astro'
import { SkipLinks } from 'accessible-astro-components'
import { Icon } from 'astro-icon/components'
---

<header>
  <SkipLinks />
  <Navigation>
    <li class="menu-item">
      <a href="/">Home</a>
    </li>
    <li class="menu-item">
      <a href="/blog/">Blog</a>
    </li>
    <li class="menu-item has-dropdown">
      <button aria-haspopup="true" aria-expanded="false">Example Pages</button>
      <ul class="dropdown-menu">
        <li class="submenu-item">
          <a href="/mdx-page/">MDX Page</a>
        </li>
        <li class="submenu-item">
          <a href="/markdown-page/">Markdown Page</a>
        </li>
        <li class="submenu-item">
          <a href="/accessible-components">Accessible Components</a>
        </li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="https://accessible-astro.dev" title="external link" rel="external noopener noreferrer">External Link</a>
    </li>
    <li class="menu-item type-icon">
      <a href="https://github.com/markteekman/accessible-astro-starter" title="Go to the GitHub page">
        <Icon name="ion:logo-github" />
      </a>
    </li>
  </Navigation>
</header>

<style lang="scss" is:global>
  @use '../assets/scss/base/outline' as *;

  header {
    .type-icon a {
      display: block;

      [data-icon] {
        height: auto;
        margin-top: -4px;
        width: 30px;

        path {
          fill: var(--action-color);
        }
      }

      &:hover {
        [data-icon] path {
          fill: var(--action-color-state);
        }
      }
    }
  }
</style>
